<template>
  <div>
    <div class="invoiceChoose">
      <header class="mint-header is-fixed">
        <div class="mint-header-button is-left">
          <button class="mint-button mint-button--default mint-button--normal">
            <span class="mint-button-icon">
              <i class="mintui mintui-back" @click="$router.go(-1)"></i>
            </span>
          </button>
        </div>
        <h1 class="mint-header-title">选择开票信息</h1>
        <div class="mint-header-button is-right">
          <button class="mint-button mint-button--default mint-button--normal">
            <label class="mint-button-text">
              <i style="color:#f60"></i>
            </label>
          </button>
        </div>
      </header>
      <div class="chooseList">
        <div class="chooseIndex" v-for="(item,index) in tempList" :key="index" @click="choose(item)">
          {{item.invoiceTitle}}
        </div>
      </div>
      <button class="setting" @click="add">开票设置</button>
    </div>
  </div>
</template>
<script>
import {
  getInvoiceTempList
} from '@/api/shop'
import {
  mapGetters
} from 'vuex'
export default {
  data() {
    return {
      tempList: []
    }
  },
  watch: {},
  components: {
  },
  created() {
    this.fetchData()
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  methods: {
    fetchData() {
      // 判断是否登录
      this.isLogin = this.userInfo ? 1 : 0
      if (!this.userInfo) return
      // 获取购物车信息
      const formData = {
        userId: this.userInfo.id
      }
      getInvoiceTempList(formData).then(res => {
        this.tempList = res.data.invoiceTempList
      })
    },
    add() {
      this.$router.push({ path: 'invoiceSetting' })
    },
    choose(item) {
      this.$router.push({
        path: 'askInvoiceInfo', query: {
          orderIds: this.$route.query.orderIds,
          addressId: this.$route.query.addressId,
          tempId: item.id
        }
      })
    }
  }
}

</script>
<style lang="scss">
@import '~assets/common/css/mixin.scss';
.invoiceChoose {
  min-height: 100vh;
  padding-top: 45px;
  padding-bottom: 105px;
  background-color: #FCFCFC;
  header {
    height: 45px;
    background-color: #FFF;
    color: #000;
    border-bottom: 1px solid #ECECEC;
    z-index: 2!important;
  }
  .title {
    height: 35px;
    line-height: 35px;
    background-color: #fff;
    padding: 0 15px;
    position: fixed;
    z-index: 1;
    width: 100%;
  }
  .chooseList {
    background-color: #fff;
    .chooseIndex {
      border-bottom: 1px solid #d4dce1;
      padding: 15px;
    }
  }
  .setting {
    background: #FFF;
    box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
    height: 44px;
    width: 100%;
    color: #4a90e2;
    position: fixed;
    bottom: 0;
  }
}
</style>
